<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- My list -->
		<div class="list m1280">My list</div>
		<!-- btn -->
		<div class="btn m1280 f f-a-c f-j-b">
			<div class="lefBtn f f-a-c">
				<div :class="{ act: num == 1 }" @click="qieNum(1)" class="exp hand">Club</div>
				<div :class="{ act: num == 2 }" @click="qieNum(2)" class="inter hand">Articles</div>
			</div>
			<div v-if="pathNum != 2" @click="newList" class="rigBtn hand">+ Create a new list</div>
		</div>
		<!-- You have 4 lists saved. -->
		<div class="saved m1280">You have {{ total }} lists saved.</div>
		<!-- Business  -->
		<div v-if="num == 1">
			<div v-for="(item, index) in list1" :key="index" class="business f f-a-c f-j-b m1280">
				<div class="leftNmae">
					<div class="bus">{{ item.groupName }}</div>
					<div class="people">
						{{ item.num }} people <span>Updated {{ dayjs(+new Date(item.updateTime)).format("YYYY-MM-DD") }}</span>
					</div>
				</div>
				<div class="leftAvart f f-a-c">
					<!-- <div class="imgList">
						<img src="/src/assets/tou.png" class="imgTouImg" alt="" />
						<img src="/src/assets/tou.png" class="imgTouImg" alt="" />
						<img src="/src/assets/tou.png" class="imgTouImg" alt="" />
					</div> -->
					<div @click="goView(item)" class="view hand">View</div>
					<img @click="goView(item)" src="/src/assets/user/back2.png" class="back2 hand" alt="" />
				</div>
			</div>
		</div>
		<div class="" v-else>
			<div v-for="(item, index) in list2" :key="index" class="business f f-a-c f-j-b m1280">
				<div class="leftNmae">
					<div class="bus">{{ item.groupName }}</div>
					<div class="people">
						{{ item.num }} people <span>Updated {{ dayjs(+new Date(item.updateTime)).format("YYYY-MM-DD") }}</span>
					</div>
				</div>
				<div class="leftAvart f f-a-c">
					<div @click="goViewBusiness(item)" class="view hand">View</div>
					<img @click="goViewBusiness(item)" src="/src/assets/user/back2.png" class="back2 hand" alt="" />
				</div>
			</div>
		</div>
		<div style="height: 30px"></div>
		<!-- 添加 -->
		<el-dialog v-model="listVisible" title="" width="540">
			<div class="dialogTitle">Create a new favorite</div>
			<div class="inpSet f f-a-c">
				<div @click="ind = 1" class="hand lef f f-a-c">
					<img v-if="ind == 1" src="/src/assets/user/gou.png" alt="" />
					<img v-else src="/src/assets/user/weigou.png" alt="" />
					Club
				</div>
				<div @click="ind = 2" class="hand lef f f-a-c">
					<img v-if="ind == 2" src="/src/assets/user/gou.png" alt="" />
					<img v-else src="/src/assets/user/weigou.png" alt="" />
					Articles
				</div>
			</div>
			<div class="nameDia">List name</div>
			<input type="text" v-model="listValue" class="dialogInp" name="" id="" />
			<div class="diolBtn f f-a-c">
				<div @click="createClub" class="add hand">Add</div>
			</div>
		</el-dialog>
		<div class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="5" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<div style="height: 70px"></div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { MyCollectionGroup, CreateClubOrArticle } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { ElMessage, dayjs } from "element-plus";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let num = ref(1);
	let ind = ref(1);
	let route = useRoute();
	let pathNum = route.query.num || 0;
	let total = ref(0);
	let pageNum = ref(1);
	let pageSize = ref(5);
	let listValue = ref("");
	let listVisible = ref(false);
	let list1 = ref([]);
	let list2 = ref([]);
	onMounted(() => {
		ClubList();
		// ArticList();
		window.addEventListener("scroll", handleScroll);
	});
	//俱乐部的列表
	const ClubList = async () => {
		let n = await MyCollectionGroup({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			type: 3
		});
		total.value = n.data.total;
		list1.value = n.data.list;
	};
	//文章的列表
	const ArticList = async () => {
		let n = await MyCollectionGroup({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			type: 2
		});
		total.value = n.data.total;
		list2.value = n.data.list;
	};
	const currentChange = e => {
		pageNum.value = e;
		if (num.value == 1) {
			ClubList();
		} else {
			ArticList();
		}
	};
	// 创建分组
	const createClub = async () => {
		let n = await CreateClubOrArticle({
			type: ind.value == 1 ? 3 : 2,
			name: listValue.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			listValue.value = "";
			if (num.value == 1) {
				ClubList();
			} else {
				ArticList();
			}
			listVisible.value = false;
		}
	};
	// 切换
	const qieNum = item => {
		pageNum.value = 1;
		num.value = item;
		if (item == 1) {
			ClubList();
		} else if (item == 2) {
			ArticList();
		}
	};
	// 点击添加列表
	const newList = () => {
		listVisible.value = true;
	};
	// 去view
	const goView = item => {
		router.push({
			path: "/KnowCreateClubView",
			query: {
				id: item.id,
				name: item.groupName
			}
		});
	};
	// 去view
	const goViewBusiness = item => {
		router.push({
			path: "/KnowCreateArticlesView",
			query: {
				id: item.id,
				name: item.groupName
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
</style>
